<template>
  <div class="clothingPics">
    <el-card>
      <el-upload
        class="upload-demo"
        ref="upload"
        action="#"
        :file-list="fileList"
        accept=".pdf, .doc, .docx, .xls, .xlsx, .zip, .jpg, .png, .rar"
        :http-request="reportFileHttpRequest"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-upload="beforeAvatarUpload"
        :auto-upload="false"
        drag
        multiple
        style="text-align: center"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传word,excel,pdf,jpg,png,zip,rar文件
        </div>
      </el-upload>
      <div align="center">
        <span slot="footer" class="dialog-footer">
          <el-button
            style="margin-left: 10px"
            size="small"
            @click="fileList = []"
            >取 消</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >上传到服务器</el-button
          >
        </span>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "clothingPics",
  data() {
    return {
      fileData: "", // 文件上传数据（多文件合一）
      fileList: [], // upload多文件数组
      uploadData: {
        fieldData: {
          id: "", // 机构id,
        },
      },
    };
  },
  methods: {
    // 上传文件 此时会触发组件的http-request
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
    },
    // 文件上传之前的钩子
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 32;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 32MB!");
      }
      return isLt2M;
    },
    // 自定义上传
    reportFileHttpRequest(param) {
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles(); // 清除上传的文件
      }
      const _this = this;
      // 开始上传文件 新建一个formData
      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append("file", param.file); //添加文件对象
      const url = "/dict/ClothingPices/Add";
      this.service.post(url, formData).then((res) => {
        this.$message({
          message: "操作成功！",
          type: "success",
        });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.clothingPics {
  text-align: left;
}
</style>
